<template>
	<view class="content">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">我的房间</view>
			<image class="plus-icon" src="../../static/images/room/plus.png" mode="aspectFit" @click="handlePlus">
			</image>

		</view>

		<view class="RoomAll">
			<view v-for="(room,index) in roomList" :key="index" class="RoomList" @click="handleRoomClick(room, index)"
				@longpress="handleLongPress(room, index)">
				<view class="room-switch">
					<image :src="getRoomIcon(room.roomPic)" class="room-icon"></image>
					<image src="/static/images/room/switch.png" class="switch-icon"
						@click.stop="handleSwitchClick(room, index)"></image>
				</view>
				<view class="room-name">{{room.roomName}}</view>
				<view class="device-num">{{getDeviceCount(room.roomId)}}个设备</view>
			</view>
		</view>
		<modal :visible="modalVisible" @close="modalVisible = false" @confirm="handleModalConfirm">
			<view>{{ modalMessage }}</view>
		</modal>

		<!-- 子组件 -->
		<add-room-modal :visible="addRoomModalVisible" @cancel="addRoomModalVisible = false"
			@message="handleAddRoom()"></add-room-modal>
		<edit-room-modal :visible="editRoomModalVisible" :room="currentRoom" @close="editRoomModalVisible = false"
			@confirm="handleEditRoomConfirm"></edit-room-modal>
	</view>
</template>

<script>
	import {
		getRoom,
		delRoom,
		addRoom,
		updateRoom
	} from '@/api/room/room.js';
	import {
		listDevice,
		getDevice,
		addDevice,
		updateDevice,
		delDevice
	} from '@/api/device/device.js';
	import Modal from "@/components/Modal.vue";
	import AddRoomModal from "@/components/AddRoomModal.vue";
	import EditRoomModal from "@/components/EditRoomModal.vue";

	export default {
		components: {
			Modal, // 注册 Modal 组件
			AddRoomModal,
			EditRoomModal
		},
		data() {
			return {
				roomList: [],
				modalVisible: false,
				modalMessage: '',
				currentRoomIndex: null,
				allLightsOn: false, // 初始状态
				deleteMode: false, // 是否为删除模式
				addRoomModalVisible: false,
				editRoomModalVisible: false,
				currentRoom: null,
				deviceList: [],
				deviceCounts: {},
				timer: null // 控制新增房间弹窗的显示
			};
		},
		methods: {
			getRoomList() {
				getRoom().then(res => {
					console.log(res.rows);
					this.roomList = res.rows;
					// console.log(this.roomList);
				});
			},
			getDeviceList() {
				getDevice().then(res => {
					//		console.log(res.rows);
					this.deviceList = res.rows;
					this.updateDeviceCounts();
					console.log(this.deviceList);
				}).catch(error => {
					console.error('Error fetching device:', error);
				});
			},
			updateDeviceCounts() {
				this.deviceCounts = {};
				this.deviceList.forEach(device => {
					if (this.deviceCounts[device.roomId]) {
						this.deviceCounts[device.roomId]++;
					} else {
						this.deviceCounts[device.roomId] = 1;
					}
				});
			},
			getDeviceCount(roomId) {
				return this.deviceCounts[roomId] || 0;
			},
			prev() {
				uni.navigateBack({
					url: ".../index.vue"
				})
			},
			getRoomIcon(roomPic) {
				// 返回房间图标的路径
				switch (roomPic) {
					case 'blue':
						return '../../static/images/room/roomblue.png';
					case 'bp':
						return '../../static/images/room/roombp.png';
					case 'green':
						return '../../static/images/room/roomgreen.png';
					case 'purple':
						return '../../static/images/room/roompurple.png';
					case 'red':
						return '../../static/images/room/roomred.png';
					case 'yellow':
						return '../../static/images/room/roomyellow.png';
					default:
						return '';
				}
			},
			handleSwitchClick(room, index) {
				this.currentRoomIndex = index;
				this.modalMessage = '是否关闭所有灯光？';
				this.deleteMode = false;
				this.modalVisible = true;
			},

			handleLongPress(room, index) {
				// 处理长按事件
				const associatedDevices = this.deviceList.filter(device => device.roomId === room.roomId);
				if (associatedDevices.length === 0) {
					this.currentRoomIndex = index;
					this.modalMessage = '是否删除该房间？';
					this.deleteMode = true;
					this.modalVisible = true;
				} else {
					uni.showToast({
						title: '该房间有设备，无法删除',
						icon: 'none'
					});
				}
			},
			handlePlus() {
				this.addRoomModalVisible = true;
			},
			handleAddRoom(msg) {
				this.addRoomModalVisible = false;

				// this.$nextTick(function() { 
				// 	this.getRoomList()
				// });
				this.timer = setTimeout(() => {
					this.getRoomList()
					this.timer = null
					console.log("提交11111111", );
				}, 100)

				// this.$nextTick(async() =>{
				// 	await this.getRoomList();
				// })
				//this.router.go(0)

				// this.timer = setTimeout(() => {
				// 	this.getRoomList()
				// 	this.timer = null
				// 	console.log("提交11111111", );
				// }, 0)
				console.log('this.getRoomList')
			},
			handleRoomClick(room, index) {
				this.currentRoom = room;
				this.editRoomModalVisible = true;
			},
			handleEditRoomConfirm(updatedRoom) {
				console.log("111", updatedRoom);
				updateRoom(updatedRoom).then(() => {
					this.getRoomList();
					this.editRoomModalVisible = false;
				});
			},
			//长安删除
			handleModalConfirm() {
				if (this.deleteMode) {
					// console.log("1111111111111111");
					// console.log(this.roomList[this.currentRoomIndex]);
					// console.log(this.roomList[this.currentRoomIndex].roomId);
					delRoom(this.roomList[this.currentRoomIndex].roomId).then(() => {
						this.getRoomList();
						this.modalVisible = false;
					});
				} else {
					// 处理关闭灯光逻辑
					this.modalVisible = false;
				}
			}
		},
		onShow() {
			this.getRoomList();
			this.getDeviceList();
		}
	};
</script>


<style>

	.room {
		font-size: 26px;
		color: #4e6490;
		font-weight: bold;
		float: left;
	}

	.more {
		color: #654bff;
		float: right;
		font-size: 18px;
	}

	.room-icon {
		height: 55px;
		width: 55px;
		border-radius: 25%;
	}

	.RoomAll {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20px;
		padding-top: 67px;
		/* 调整间距 */
	}

	.RoomList {
		display: block;
		margin: auto;
		background-color: white;
		padding: 22px;
		margin-bottom: 30px;
		margin: 10px auto;
		border-radius: 10px;
		/* 圆角边框 */
		border: 1px #ced3df;
		/* 设置外边框 */
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		height: 190px;
		width: calc(50% - 10px);
		/* 每行两个元素，减去边距 */
		box-sizing: border-box;
		/* 包括内边距和边框在内计算宽度 */
	}

	.RoomList:nth-child(2n+1) {
		margin-left: 0;
		/* 确保每行的第一个元素靠左 */
	}

	.RoomList:nth-child(2n) {
		margin-right: 0;
		/* 确保每行的第二个元素靠右 */
	}

	.room-name {
		font-size: 20px;
		color: #4e6490;
		font-weight: bold;
		padding-top: 21px;

	}

	.device-num {
		color: #a3a7af;
		margin-top: 10px;
		font-size: 14px;
	}

	.room-switch {
		display: flex;
		justify-content: space-between;
	}

	.switch-icon {
		height: 50px;
		width: 50px;
		margin-top: 5px;
		border-radius: 50%;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		/* 将状态栏固定在最上方 */
		
		/* 从顶部开始定位 */
		left: 0;
		/* 从左侧开始定位 */
		width: 100%;
		/* 宽度100%，充满整个屏幕 */
		z-index: 9999;
		/* 确保状态栏位于其他内容上方 */
		/* border-bottom: 1.5px solid #f0f0f0; */
		/* 下方灰色边框线 */
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		margin-right: 86px;
		padding: 3px;
	}

	.myroom {
		flex: 1.5;
		font-size: 18px;
		color: #4e6490;
		font-weight: bold;

	}

	.plus-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		margin-left: 86px;
		padding: 3px;
	}
</style>